<template>
  <div class="my-body">
    <div class="my-flow">
      <div v-for="(v,i) in tableData" :key="i">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <el-image :src="baseURL+'/small-service-flowable/app/rest/models/'+v.id+'/thumbnail?version=1611120353869'"
                    class="image"
                    @click="openImage(v)"
                    fit="contain"/>
          <div style="padding: 14px;background-color: #F2F6FC">
            <span>{{ v.name }}</span>
            <div class="bottom clearfix">
              <time class="time"> {{ momentF(v.lastUpdated) }}</time>
              <el-button type="text" class="button" @click="deploy(v)">部署</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <el-dialog
        :visible.sync="dialogShow"
        top="15px"
        :width="flowChartData.diagramWidth + 50+'px'">
      <el-row type="flex" justify="center">
        <flow-chart :elements="flowChartData.elements" :flows="flowChartData.flows"
                    :diagramWidth="flowChartData.diagramWidth +10" :diagramHeight="flowChartData.diagramHeight"
                    :diagram-begin-x="flowChartData.diagramBeginX" :diagram-begin-y="flowChartData.diagramBeginY"/>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import table from "@/mixins/table";
import service from "@/api/service";
import flowChart from "@/components/flowChart";
import moment from 'moment'

export default {
  name: "bpmnModel",
  mixins: [table],
  components: {
    flowChart
  },
  data() {
    return {
      baseURL: service.baseURL,
      flowChartData: {}
    }
  },
  mounted() {
    // this.init()
  },
  methods: {
    init() {
      service.get('/small-service-flowable/app/rest/models?filter=processes&modelType=0&sort=modifiedDesc').then(res => {
        this.tableData = res.data
      })
    },
    openImage(row) {
      this.dialogShow = true
      service.get('/small-service-flowable/app/rest/models/' + row.id + '/model-json?nocaching=1611121207603').then(res => {
          this.flowChartData = res;
      })
    },
    momentF(v) {
      return moment(v).format("YYYY-MM-DD HH:mm")
    },
    deploy(v) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        service.get('/small-service-flowable/process/definition/deploymentProcessDefinitionFromUIModelId', {
          modelId: v.id
        }).then(this.callback)
      })
    }
  }
}
</script>

<style scoped lang="less">
.my-flow {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  > div {
    width: 300px;
    margin: 10px;
  }
}

.image {
  height: 250px;
}

.time {
  font-size: 13px;
  color: #999;
}

.button {
  padding: 0;
  float: right;
}
</style>